<script type="text/javascript">
	$(function(){
		function set_progress_bar(){
			{% for host in cluster.cpu_top3_hosts %}
				var speed = 1000;
				var nowWidth = $(".progress_bar_"+ "{{host.id}}");
				var prog_total_width = parseInt($(".progress_bar_"+ "{{host.id}}").parent('.progressBar').css('width'))
				var bar_v = prog_total_width * parseFloat("{{host.usage_cpu}}")
			   	nowWidth.animate({width:bar_v},speed);
			{% endfor %}
		}
		set_progress_bar();
	});

</script>
<div class="panel-heading"><a href="#">CPU使用率  TOP3 </a>
<a href="" class="panel-right-i"><i class="fa fa-gear"></i></a></div>
<div class="panel-body n_panel-body">
    <ul class="memory_ul">
		{% for host in cluster.cpu_top3_hosts %}
        <li>
            <p class="storage_been_val">
            <span>
            <span class="been_memory_bar">
			{{host.ip}}
			</span>
            </span>
            <span class="progress_remain_bar">
            <span class="been_memory_bar">{{host.usage_cpu|float * 100}}%</span>
            </span>
        </p>
            <div class="progressBar">
            <div class="progress_bar progress_bar_{{host.id}}"></div>
        </div>
        </li>
		{% endfor %}
    </ul>
